<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>HTML Table</title>
    <script src="../raxan/startup.js" type="text/javascript">
    	/**
    	 * HTMLTable with hover effect
    	 */

        html.css('master');
        html.css('default/theme');
        html.include('jquery');

		// listen to html ready event
        html.ready(function(){

            $('table tr').hover(function(){
               if (!$(this).hasClass('header')) $(this).addClass('hover');
            },
            function(){
               $(this).removeClass('hover');
            });

        });

    </script>
</head>

<body>
<div class="container c30 hlf-pad lightgray">&nbsp;<a href="index.html" title="Back to the Examples Web Page"><img src="images/arrow_left.png" width="16" alt="Menu"/> Examples</a> | Raxan Framework&nbsp;</div>
<div class="container c30 tpm">
    <h2 class="bottom">Food items</h2>
    <p>Move your mouse over the table rows to see hover effect</p>
    <table class="c22 border mouse-cursor white " cellpadding="0" cellspacing="0">
    	<thead>
			<tr class="tbl-header">
				<td>Name</td>
				<td>Sku</td>
				<td class="sort">Category</td>
				<td>Qty</td>
				<td>Color</td>
			</tr>
    	</thead>
    	<tbody>
			<tr>
				<td>Milk</td>
				<td>0001</td>
				<td class="sort">Dairy</td>
				<td>7</td>
				<td>White</td>
			</tr>
			<tr class="even ">
				<td>Bread</td>
				<td>0012</td>
				<td class="sort">Wheat</td>
				<td>3</td>
				<td>Brown</td>
			</tr>
			<tr>
				<td>Butter</td>
				<td>0054</td>
				<td class="sort">Dairy</td>
				<td>2</td>
				<td>Yellow</td>
			</tr>
			<tr class="even">
				<td>Cheese</td>
				<td>0021</td>
				<td class="sort">Dairy</td>
				<td>6</td>
				<td>White</td>
			</tr>
			<tr>
				<td>Jam</td>
				<td>0041</td>
				<td class="sort">Other</td>
				<td>4</td>
				<td>Blue</td>
			</tr>
    	</tbody>
    </table>
</div>


</body>

</html>
